<template>
  <div class="ServiceConfiguration">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        :label="item.typeName"
        :name="item.id"
        v-for="item in tabsList"
        :key="item.id"
      />
    </el-tabs>
    <div class="chooseBox">
      <div class="chooseBox-left">
        <el-button
          type="primary"
          plain
          style="width: calc(100% - 16px); margin: 8px"
          @click="handlePoster"
          >主图配置</el-button
        >
        <el-button
          plain
          style="width: calc(100% - 16px); margin: 8px"
          @click="handleClassify(false)"
          >新增类别</el-button
        >
        <div class="choose-list" v-for="(item, index) in termList" :key="index">
          <div
            :class="['choose-item', index == selected ? 'actived' : '']"
            @click="handleClickItem(item, index)"
          >
            <div>{{ item.typeName }}</div>
            <div>
              <el-button :icon="Edit" circle @click="handleClassify(item)" />
              <el-button
                :icon="Delete"
                circle
                @click="handleDelClassify(item)"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="chooseBox-right">
        <div style="text-align: right; margin: 10px">
          <el-button type="primary" @click="handleEdit(false)"
            >新增服务</el-button
          >
        </div>
        <el-table :data="tableData">
          <el-table-column fixed prop="title" label="服务名称" align="center" />
          <!-- <el-table-column prop="img" label="主图" align="center" />
          <el-table-column prop="logo" label="logo" align="center" /> -->
          <el-table-column
            prop="description"
            label="服务介绍"
            align="center"
            :min-width="200"
          />
          <el-table-column
            prop="serviceScope"
            label="服务范围"
            align="center"
          />
          <el-table-column
            prop="serviceGuarantee"
            label="服务保障"
            align="center"
            :min-width="200"
          />
          <el-table-column prop="price" label="价格" align="center" />
          <el-table-column fixed="right" label="操作" align="center">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                link
                type="danger"
                size="small"
                @click="handleDel(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <ServiceDetail ref="ServiceDetailEdit" @updatePages="updatePages" />
    <ServiceClassify ref="ServiceClassifyEdit" @updateTerms="updateTerms" />
    <ServicePoster ref="servicePosterEdit"></ServicePoster>
  </div>
</template>
<script setup>
import ServiceDetail from "./components/ServiceDetail.vue";
import ServiceClassify from "./components/ServiceClassify.vue";
import ServicePoster from "./components/ServicePoster.vue";
import { Edit, Delete } from "@element-plus/icons-vue";
import serviceTypeAPI from "@/api/serviceType";
import serviceInfoAPI from "@/api/serviceinfo";
// tabs相关
const servicePosterEdit = ref();
const handlePoster = (item) => {
  servicePosterEdit.value.init(activeName.value);
};
const tabsList = ref([]);
const activeName = ref();
const getTabs = () => {
  let params = {
    level: 1,
    pid: 0,
  };
  serviceTypeAPI
    .getServicetype(params)
    .then(async (res) => {
      tabsList.value = res;
      activeName.value = res[0].id;
      await getTermList(activeName.value);
      // if (termList.value.length > 0) {
      //   selectedItem.value = termList.value[0];
      //   getPage();
      // }
    })
    .catch((err) => {});
};
getTabs();

const handleClick = async (tab, event) => {
  getTermList(tab.props.name);
};
// 左侧
const termList = ref([]);
const getTermList = (id) => {
  return new Promise((resolve, reject) => {
    let params = {
      pid: id,
      level: 2,
    };
    serviceTypeAPI
      .getServicetype(params)
      .then((res) => {
        termList.value = res;
        if (termList.value.length > 0) {
          selectedItem.value = termList.value[0];
          getPage();
        }
        resolve();
      })
      .catch((err) => {});
  });
};
const updateTerms = (value) => {
  getTermList(value);
};
const selected = ref(0);
const selectedItem = ref({});
const ServiceClassifyEdit = ref(null);
const handleClassify = (item) => {
  ServiceClassifyEdit.value.init(activeName.value, item);
};
const handleDelClassify = (item) => {
  ElMessageBox.alert("确认删除该分类吗", "提示", {
    confirmButtonText: "确定",
    callback: (action) => {
      if (action == "confirm") {
        serviceTypeAPI
          .deleteByIds(item.id)
          .then((res) => {
            getTermList(activeName.value);
          })
          .catch((err) => {});
      }
    },
  });
};

const handleClickItem = (item, index) => {
  selected.value = index;
  selectedItem.value = item;
  getPage();
};
// 右侧
const ServiceDetailEdit = ref(null);
const tableData = ref([]);
const getPage = () => {
  let params = {
    typeId: selectedItem.value.id,
    status: 0,
  };
  serviceInfoAPI
    .getServiceInfo(params)
    .then((res) => {
      tableData.value = res;
    })
    .catch((err) => {});
};
const handleEdit = (row) => {
  ServiceDetailEdit.value.init(selectedItem.value.id, row.id);
  // console.log(ServiceDetailEdit.value);
};
const handleDel = (row) => {
  console.log(row);
  ElMessageBox.alert("确认删除该服务吗", "提示", {
    confirmButtonText: "确定",
    callback: (action) => {
      if (action == "confirm") {
        serviceInfoAPI
          .deleteByIds(row.id)
          .then((res) => {
            getPage();
          })
          .catch((err) => {});
      }
    },
  });
};
const updatePages = () => {
  getPage();
};
</script>
<style lang="scss" scoped>
.ServiceConfiguration {
  margin: 0 20px;
}

.chooseBox {
  display: flex;
  border: 1px solid #fff;
  border-radius: 6px;

  .chooseBox-left {
    min-width: 230px;
    height: calc(100vh - 64px - 40px - 18px - 40px);
    background: rgb(255 255 255 / 50%);

    .choose-label {
      padding: 20px 24px;
      font-size: 18px;
      font-weight: 600;
      color: #1f1f1f;
    }

    .choose-list {
      font-size: 14px;

      .choose-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        cursor: pointer;

        &.actived {
          padding-left: 16px;
          color: var(--el-color-primary);
          background: #fff;
          border-left: 4px solid var(--el-color-primary);
        }
      }
    }
  }

  .chooseBox-right {
    flex: 1;
    background: rgb(255 255 255 / 80%);
    overflow-x: scroll;
  }
}
</style>
